var path = require('path');
var webpack = require('webpack');
//html模板文件进行输出和生成，并自动把我们需要引入的js文件给插入到html模板当中。
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ProgressBarPlugin = require('progress-bar-webpack-plugin');
//将css文件不以style的方式引入
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var config  = {
    //唯一入口文件
	entry: './src/index.js',
    //输出目录
	output: {
		path: path.resolve(__dirname, './dist'),//打包后的js文件存放的地方(build 后的文件)
		publicPath: '/dist/',//指定资源文件引用的目录(build 在内存中的位置)//服务器根路径
        filename: 'bundle.js'//打包后输出的js的文件名
	},
    devServer: {
       inline: true,//实时刷新
       hot:true,
       port: 9090,
       open:true,
       contentBase:'./',//本地服务器所加载的页面所在的目录
       progress: true,
       host: 'localhost'
     },
	module: {
        rules: [
        {
            test: /\.css$/,
            exclude: '/node_modules/',
            loader: 'style-loader!css-loader?sourceMap'
        },
        {
            test: /\.scss$/,
            exclude: /node_modules/,
            use: [{
                loader: "style-loader" // creates style nodes from JS strings
            }, {
                loader: "css-loader" // translates CSS into CommonJS
            }, {
                loader: "sass-loader" // compiles Sass to CSS
            }]
            // loader: ExtractTextPlugin.extract("style", 'css!sass') //这里用了样式分离出来的插件，如果不想分离出来，可以直接这样写 loader:'style!css!sass'
        },
        {
			test: /\.(js|jsx)$/, //一个匹配loaders所处理的文件的拓展名的正则表达式，这里用来匹配js和jsx文件（必须）
			exclude: '/node_modules/', //屏蔽不需要处理的文件（文件夹）（可选）
			use: ['babel-loader']
		},
        {
            test: /\.(woff|svg|eot|ttf)\??.*$/,
            exclude: /node_modules/,
            loader: 'url-loader?limit=80000&name=fonts/[name].[md5.hash.hex:7].[ext]'
        },
        {
            test: /\.(jpe?g|png|gif|svg)$/i,
            use: [{
                // 小于10k的图片转base64,大于10k的不转
                loader: 'url-loader',
                options: {
                            limit: 10000,
                            name:'static/[name].[ext]'
                         }
                  },
                {
                    loader: 'image-webpack-loader',
                    options: {
                    query: {
                    mozjpeg: {
                        progressive: true,
                        },
                        gifsicle: {
                            interlaced: true,
                        },
                        optipng: {
                            optimizationLevel: 7,
                        }
                     }
                    }
                }]
            },
            {
               test: /\.html$/,
               exclude: /node_modules/,
               loader: "raw-loader"
           }
	]},
	plugins: [
        // new webpack.ProvidePlugin({ //加载jq
        // $: 'jquery'
        // }),
		new webpack.HotModuleReplacementPlugin(),//热加载
		new ProgressBarPlugin(),
        new ExtractTextPlugin('styles.css'),
        new webpack.optimize.MinChunkSizePlugin({ //压缩代码
            compress: {
            warnings: false
            }
        }),
        new HtmlWebpackPlugin({
                   template: "./index.html", // 模板路径
                   filename: "index.html"  // 编译之后新的模板
        })
	],

};

module.exports  = config
